import React from 'react';
import { View, Image, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { Card, Button } from '@ant-design/react-native';

export interface DeviceCardProps {
    image: string | number;
    title: string;
    desc: string;
    onEditPress?: () => void;
    inLoginPage?: boolean; // 是否在登录页面
    showCenterButton?: boolean; // 新增参数
}

export const CurrentSceneCard: React.FC<DeviceCardProps> = ({
    image,
    title,
    desc,
    onEditPress,
    inLoginPage = false, // 是否在登录页面
    showCenterButton = false, // 默认不显示
}) => {
    return (
        <View style={{ width: '100%', height: 200 }}>
            <Card full style={styles.card}>
                <View style={{ width: '100%', height: '100%' }}>
                    <Image
                        source={typeof image === 'string' ? { uri: image } : image}
                        style={[styles.image, { resizeMode: 'cover' }]}
                    />
                    <View style={styles.overlay}>
                        <Text style={styles.title}>{title}</Text>
                        <Text style={inLoginPage ? styles.desc2 : styles.desc}>{desc}</Text>    
                        {showCenterButton && (
                            <Button
                                // type="primary"
                                style={{ width: 80, height: 35, borderRadius: 10, marginTop: 10, marginLeft: 32 }}
                                // onPress={() => alert('你点击了中央按钮')}
                            >
                                查看
                            </Button>
                        )}
                    </View>
                </View>
            </Card>
        </View>
    );
};

const styles = StyleSheet.create({
    card: {
        width: '100%',
        height: 244,
        overflow: 'hidden',
        elevation: 2,
        borderWidth: 0,
    },
    image: {
        width: '100%',
        height: '100%',
        position: 'absolute',
        opacity: 0.7,
        top: 0,
        left: 0,
    },
    overlay: {
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        padding: 16,
    },
    title: {
        paddingTop: 60,
        paddingLeft: 30,
        color: '#000',
        fontSize: 28,
        fontWeight: 'bold',
    },
    desc: {
        paddingLeft: 30,
        color: '#888',
        fontSize: 18,
        marginTop: 4,
    },
    desc2: {
        paddingLeft: 30,
        color: '#000',
        fontSize: 28,
        // marginTop: 4,
        fontWeight: 'bold',
    },
    centerButtonBox: {
        position: 'absolute',
        top: '50%',
        left: '50%',
        transform: [{ translateX: -60 }, { translateY: -24 }],
        zIndex: 10,
    },
});